<!DOCTYPE html>
<html>
<head>
    <title>config form</title>
    <#include "/header.html">
</head>
<body class="bg-white">
<div id="appMain">
    <form class="layui-form layuimini-form" action="" lay-filter="dataForm">
        <div class="layui-form-item">
            <label class="layui-form-label required">存储类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="七牛" lay-filter="ossType">
                <input type="radio" name="type" value="2" title="阿里云" lay-filter="ossType" checked="">
                <input type="radio" name="type" value="3" title="腾讯云" lay-filter="ossType">
            </div>
        </div>
        <!--七牛云-->
        <div class="layuimini-form oss-form-qiniu">
            <div class="layui-form-item">
                <label class="layui-form-label">域名</label>
                <div class="layui-input-block">
                    <input type="text" name="qiniuDomain" placeholder="七牛绑定的域名" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路径前缀</label>
                <div class="layui-input-block">
                    <input type="text" name="qiniuPrefix" placeholder="不设置默认为空" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">AccessKey</label>
                <div class="layui-input-block">
                    <input type="text" name="qiniuAccessKey" placeholder="七牛AccessKey" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">SecretKey</label>
                <div class="layui-input-block">
                    <input type="text" name="qiniuSecretKey" placeholder="七牛SecretKey" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">空间名</label>
                <div class="layui-input-block">
                    <input type="text" name="qiniuBucketName" placeholder="七牛存储空间名" value="" class="layui-input">
                </div>
            </div>
        </div>
        <!--阿里云-->
        <div class="layuimini-form oss-form-aliyun">
            <div class="layui-form-item">
                <label class="layui-form-label">域名</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunDomain" placeholder="阿里云绑定的域名" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路径前缀</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunPrefix" placeholder="不设置默认为空" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">EndPoint</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunEndPoint" placeholder="阿里云EndPoint" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">AccessKeyId</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunAccessKeyId" placeholder="阿里云AccessKeyId" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">AccessKeySecret</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">BucketName</label>
                <div class="layui-input-block">
                    <input type="text" name="aliyunBucketName" placeholder="阿里云BucketName" value="" class="layui-input">
                </div>
            </div>
        </div>
        <!--腾讯云-->
        <div class="layuimini-form oss-form-qcloud">
            <div class="layui-form-item">
                <label class="layui-form-label">域名</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudDomain" placeholder="腾讯云绑定的域名" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">路径前缀</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudPrefix" placeholder="不设置默认为空" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">AppId</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudAppId" placeholder="腾讯云AppId" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">SecretId</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudSecretId" placeholder="腾讯云SecretId" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">SecretKey</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudSecretKey" placeholder="腾讯云SecretKey" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">BucketName</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudBucketName" placeholder="腾讯云BucketName" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Bucket所属地区</label>
                <div class="layui-input-block">
                    <input type="text" name="qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" id="commitBtn" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form,
            $ = layui.$;

        var typeTplUpdate = function(type) {
            console.log(type)
            $(".oss-form-qiniu").addClass('layui-hide');
            $(".oss-form-aliyun").addClass('layui-hide');
            $(".oss-form-qcloud").addClass('layui-hide');
            if (type == 1) {
                $(".oss-form-qiniu").removeClass('layui-hide');
            }
            else if (type == 2) {
                $(".oss-form-aliyun").removeClass('layui-hide');
            }
            else if (type == 3) {
                $(".oss-form-qcloud").removeClass('layui-hide');
            }
        }

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: serverUrl('oss/config/info'),
                data: {},
                dataType: "json",
                success: function (result) {
                    if (result.code === 0) {
                        form.val('dataForm', result.config);
                        typeTplUpdate(result.config.type);
                    }
                }
            });
        });

        form.on('radio(ossType)', function(data){
            typeTplUpdate(data.value);
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            submitFormData('oss/config/save', data.field);
            return false;
        });

    });
</script>
</body>
</html>